<include file="public/layout" />
<script type="text/javascript" src="//api.map.baidu.com/api?ak=iR2qhnXd5vrFI9wUuIRG9AWGIqykVNok&v=2.0"></script>
<link href="__PUBLIC__/static/css/timePicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__PUBLIC__/static/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery-timepicker.js"></script>
<style>
	.select-business-map {
		width: 485px;
		height: 270px;
	}
</style>
<body style="background-color: #FFF; overflow: auto;">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
	<div class="fixed-bar">
		<div class="item-title"><a class="back" href="javascript:history.back();" title="返回列表"><i class="fa fa-arrow-circle-o-left"></i></a>
			<div class="subject">
				<h3>自提点管理 - 编辑自提点</h3>
				<h5>网站系统自提点管理</h5>
			</div>
		</div>
	</div>
	<form class="form-horizontal" id="handleForm">
		<input name="shop_id" type="hidden" value="{$shop['shop_id']}" />
		<input name="longitude" type="hidden" value="{$shop['longitude']}" />
		<input name="latitude" type="hidden" value="{$shop['latitude']}" />
		<div class="ncap-form-default">
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>门店自提点后台账号</label>
				</dt>
				<dd class="opt">
					<input type="text" name="shopper_name" value="{$shop.shopper_name}" maxlength="16" class="input-txt">
					<p class="notic">门店自提点后台账号</p>
					<span class="err" id="err_shopper_name"></span>
				</dd>
			</dl>
			<empty name="shop">
				<dl class="row">
					<dt class="tit">
						<label><em>*</em>会员账号</label>
					</dt>
					<dd class="opt">
						<input type="text" name="user_name" value="{$shop.user_name}" class="input-txt" placeholder="前台用户账号,关联门店自提点后台账号">
						<p class="notic">请输入手机号或者邮箱，用于登录会员中心</p>
						<span class="err" id="err_user_name"></span>
					</dd>
				</dl>
				<dl class="row">
					<dt class="tit">
						<label><em>*</em>登录密码</label>
					</dt>
					<dd class="opt">
						<input type="password" name="password" value="" maxlength="16" class="input-txt">
						<p class="notic">登录密码(门店自提点后台登录密码和前台用户登录密码一致)</p>
						<span class="err" id="err_password"></span>
					</dd>
				</dl>
			</empty>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>自提点名称</label>
				</dt>
				<dd class="opt">
					<input type="text" name="shop_name" value="{$shop.shop_name}" class="input-txt">
					<span class="err" id="err_shop_name"></span>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>联系电话</label>
				</dt>
				<dd class="opt">
					<input type="text" name="shop_phone_code" value="{$shop.shop_phone_code}" class="input-txt" placeholder="区号"> - <input type="text"  name="shop_phone" value="{$shop.shop_phone}" class="input-txt" placeholder="请输入电话号码，区号可为空">
					<span class="err" id="err_shop_phone"></span>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>营业时间</label>
				</dt>
				<dd class="opt">
					<div class="fl">
						<input type="text" class="time-picker" name="work_start_time" value="9:00" readonly />~<input type="text" class="time-picker" name="work_end_time" value="18:00" readonly />
					</div>
					<div class="z-week fl p">
						<div class="z-week-list">
							周一
							<input type="hidden" name="monday" value="{$shop['monday']}"/>
						</div>
						<div class="z-week-list">
							周二
							<input type="hidden" name="tuesday" value="{$shop['tuesday']}"/>
						</div>
						<div class="z-week-list">
							周三
							<input type="hidden" name="wednesday" value="{$shop['wednesday']}"/>
						</div>
						<div class="z-week-list">
							周四
							<input type="hidden" name="thursday" value="{$shop['thursday']}"/>
						</div>
						<div class="z-week-list">
							周五
							<input type="hidden" name="friday" value="{$shop['friday']}"/>
						</div>
						<div class="z-week-list">
							周六
							<input type="hidden" name="saturday" value="{$shop['saturday']}"/>
						</div>
						<div class="z-week-list">
							周日
							<input type="hidden" name="sunday" value="{$shop['sunday']}"/>
						</div>
					</div>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>自提点地址</label>
				</dt>
				<dd class="opt">
					<select name="province_id" id="province" onchange="get_city(this)">
						<option value="0">请选择</option>
						<volist name="province_list" id="province">
							<option <if condition="$shop['province_id'] eq $province['id']">selected</if>  value="{$province.id}">{$province.name}</option>
						</volist>
					</select>
					<select name="city_id" id="city" onchange="get_area(this)">
						<option  value="0">请选择</option>
						<volist name="city_list" id="city">
							<option <if condition="$shop['city_id'] eq $city['id']">selected</if>  value="{$city.id}">{$city.name}</option>
						</volist>
					</select>
					<select name="district_id" id="district">
						<option  value="0">请选择</option>
						<volist name="district_list" id="district">
							<option <if condition="$shop['district_id'] eq $district['id']">selected</if>  value="{$district.id}">{$district.name}</option>
						</volist>
					</select>
					<span class="err" id="err_province_id"></span>
					<span class="err" id="err_city_id"></span>
					<span class="err" id="err_district_id"></span>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>详细地址</label>
				</dt>
				<dd class="opt">
					<input type="text" name="shop_address" value="{$shop.shop_address}" class="input-txt">
					<a class="ncap-btn" id="search_map"><i class="fa fa-search"></i>搜索地图</a>
					<span class="err" id="err_shop_address"></span>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>地图定位</label>
				</dt>
				<dd class="opt">
					<div class="select-business-wrap p">
						<div class="select-business-map fl">
							<div id="container" style="width: 100%;height: 100%;"></div>
						</div>
						<script type="text/javascript">
							function MarkerPoint(lng, lat) {
								this.lng = lng;
								this.lat = lat;
							}
							var map = new BMap.Map("container");
							var geoc = new BMap.Geocoder();   //地址解析对象
							var markersArray = [];
							var geolocation = new BMap.Geolocation();
							var local = new BMap.LocalSearch(map, {
								renderOptions:{map: map}
							});

							var longitude = $("input[name='longitude']").val();
							var latitude = $("input[name='latitude']").val();
							var shop_id = $("input[name='shop_id']").val();
							if(longitude == '' || latitude == ''){
								longitude = 113.869117;
								latitude = 22.581735;
							}
							var markerPoint = new MarkerPoint(longitude,latitude);
							var point = new BMap.Point(longitude, latitude);
							map.centerAndZoom(point, 12); // 中心点
							if(shop_id == '' || shop_id== 0){
								geolocation.getCurrentPosition(function (r) {
									if (this.getStatus() == BMAP_STATUS_SUCCESS) {
										console.log(r.point);
										var mk = new BMap.Marker(r.point);
//									map.addOverlay(mk);
										map.panTo(r.point);
										map.enableScrollWheelZoom(true);
									}
									else {
										alert('failed' + this.getStatus());
									}
								}, {enableHighAccuracy: true})
							}else{
								var mk = new BMap.Marker(markerPoint);
								map.addOverlay(mk);
								map.panTo(markerPoint);
								map.enableScrollWheelZoom(true);
							}

							map.addEventListener("click", showInfo);


							//清除标识
							function clearOverlays() {
								if (markersArray) {
									for (i in markersArray) {
										map.removeOverlay(markersArray[i])
									}
								}
							}
							//地图上标注
							function addMarker(point) {
								var marker = new BMap.Marker(point);
								markersArray.push(marker);
								clearOverlays();
								map.addOverlay(marker);
							}
							//点击地图事件处理
							function showInfo(e) {
								$("input[name='longitude']").val(e.point.lng);
								$("input[name='latitude']").val(e.point.lat);
								geoc.getLocation(e.point, function (rs) {
									var addComp = rs.addressComponents;
									var address = addComp.street + addComp.streetNumber;
									if(address != ''){
										$("input[name='shop_address']").val(address);
									}
								});
								addMarker(e.point);
							}
							$(function() {
								$(document).on('click', '#search_map', function() {
									var province_id = $("#province");
									var city_id = $("#city");
									var district_id = $("#district");
									var shop_address = $("input[name='shop_address']").val();
									if(province_id.val() == 0){
										layer.open({icon:2,time:2000,content:"请选择省份"});
										return;
									}
									if(city_id.val() == 0){
										layer.open({icon:2,time:2000,content:"请选择市"});
										return;
									}
									if(district_id.val() == 0){
										layer.open({icon:2,time:2000,content:"请选择镇/区"});
										return;
									}
									if(shop_address == ''){
										layer.open({icon:2,time:2000,content:"请填写详细地址"});
										return;
									}
									var address = province_id.find("option:selected").text() + city_id.find("option:selected").text() + district_id.find("option:selected").text() + shop_address;
									local.search(address);
								});
							})
						</script>
					</div>
					<span class="err" id="err_longitude"></span>
				</dd>
			</dl>
			<dl class="row">
				<dt class="tit">
					<label><em>*</em>门店照片</label>
				</dt>
				<dd class="opt">
					<div class="ncap-form-default">
						<table class="table table-bordered">
							<tbody>
							<tr>
								<td>
									<volist name="shop_image_list" id="shop_image" item="vo" key="k" >
										<div style="width:100px; text-align:center; margin: 5px; display:inline-block;" class="goods_xc">
											<input type="hidden" value="{$shop_image['image_url']}" name="shop_images[]">
											<a href="{$shop_image['image_url']}" target="_blank"><img width="100" height="100" src="{$shop_image['image_url']}"></a>
											<br>
											<a href="javascript:void(0)" onClick="shop_image_del(this,'{$shop_image.image_url}')">删除</a>
										</div>
									</volist>

									<div class="goods_xc" style="width:100px; text-align:center; margin: 5px; display:inline-block;">
										<a href="javascript:void(0);" onClick="GetUploadify(10,'','shop','shop_image_call_back');"><img src="/public/images/add-button.jpg" width="100" height="100" /></a>
										<br/>
										<a href="javascript:void(0)">&nbsp;&nbsp;</a>
									</div>
								</td>
							</tr>
							</tbody>
						</table>
						<span class="err" id="err_shop_images"></span>
					</div>
				</dd>
			</dl>

			<dl class="row">
				<dt class="tit">
					<label>供货商</label>
				</dt>
				<dd class="opt">
					<select name="suppliers_id">
						<option  value="0">不选则无供货商</option>
						<volist name="suppliers_list" id="s">
							<option <if condition="$shop['suppliers_id'] eq $s['suppliers_id']">selected="selected"</if>  value="{$s.suppliers_id}">{$s.suppliers_name}</option>
						</volist>
					</select>
				</dd>
			</dl>
			<div class="bot"><a class="ncap-btn-big ncap-btn-green" id="submit">确认提交</a></div>
		</div>
	</form>
</div>
<script type="text/javascript">
	$(function () {
		$(document).on("click", '#submit', function (e) {
			$('#submit').attr('disabled',true);
			verifyForm();
		})
	})
	function verifyForm(){
		$('span.err').hide();
		var shop_id = $("input[name='shop_id']").val();
		var url = "{:U('Shop/add')}";
		if(shop_id > 0){
			url = "{:U('Shop/save')}";
		}
		$.ajax({
			type: "POST",
			url: url,
			data: $('#handleForm').serialize(),
			async:false,
			dataType: "json",
			error: function () {
				layer.alert("服务器繁忙, 请联系管理员!");
			},
			success: function (data) {
				if (data.status == 1) {
					layer.msg(data.msg,{icon: 1,time: 2000},function(){
						location.href = "{:U('Shop/index')}";
					});
				} else {
					$('#submit').attr('disabled',false);
					$.each(data.result, function (index, item) {
						$('span.err').show();
						var id = index.replace('[]','');
						$('#err_'+id).text(item);
					});
					layer.msg(data.msg, {icon: 2,time: 3000});
				}
			}
		});
	}
	// 上传商品相册回调函数
	function shop_image_call_back(paths) {
		var last_div = $(".goods_xc:last").prop("outerHTML");
		for (var i = 0; i < paths.length; i++) {
			$(".goods_xc:eq(0)").before(last_div);	// 插入一个 新图片
			$(".goods_xc:eq(0)").find('a:eq(0)').attr('href', paths[i]).attr('onclick', '').attr('target', "_blank");// 修改他的链接地址
			$(".goods_xc:eq(0)").find('img').attr('src', paths[i]);// 修改他的图片路径
			$(".goods_xc:eq(0)").find('a:eq(1)').attr('onclick', "shop_image_del(this,'" + paths[i] + "')").text('删除');
			var input_obj = $("<input type='hidden' name='shop_images[]' value='"+paths[i]+"'/>");
			$(".goods_xc:eq(0)").find('a:eq(0)').before(input_obj);
//			$(".goods_xc:eq(0)").find('input').val(paths[i]); // 设置隐藏域 要提交的值
		}
	}
	/**
	 * 上传之后删除组图input
	 * @access   public
	 * @val      string  删除的图片input
	 */
	function shop_image_del(obj,path)
	{
		$.ajax({
			type:'GET',
			url:"{:U('Admin/Uploadify/delupload')}",
			data:{action:"del", filename:path},
			success:function(){
				$(obj).parent().remove(); // 删除完服务器的, 再删除 html上的图片
			}
		});
		// 删除数据库记录
		$.ajax({
			type:'GET',
			url:"{:U('Admin/Shop/shopImageDel')}",
			data:{filename:path},
			success:function(){
				//
			}
		});
	}
	$(document).ready(function(e) {
		var shop_id = $("input[name='shop_id']").val();
		if (shop_id > 0) {
			$("input[name='shopper_name']").attr('disabled', 'disabled');
		}
		$('.z-week').find('.z-week-list').each(function(i,o){
			var day = $(this).find('input').val();
			if(day == 1){
				$(this).addClass('week-list-bg');
			}else{
				$(this).removeClass('week-list-bg');
			}
		})
		$(".time-picker").hunterTimePicker();
		$(".z-week-list").click(function  () {
			if($(this).hasClass('week-list-bg')){
				$(this).find("input").val(0);
				$(this).removeClass('week-list-bg')
			}else{
				$(this).find("input").val(1);
				$(this).addClass('week-list-bg')
			}
		})
	});
</script>
</body>
</html>